<template>
  <div class="dept-manage-container common-container">
    <div class="dept-manage-content">
      <div class="search-container">
        <label class="search-label-config">
          <span class="label-name">部门名称:</span>
          <el-input
            v-model="search.dept"
            placeholder="请输入部门名称"
            clearable
            style="width: 200px; margin-left: 10px; margin-right: 30px;"
          ></el-input>
        </label>
        <el-button class="search-config-button" type="primary" @click="handleSearch">查询</el-button>
        <el-button class="search-config-button"  @click="handleReset">重置</el-button>
      </div>
      <div class="dept-table-container">
        <div class="add-button-container">
          <el-button class="search-config-button" type="primary" @click="handleAdd">新增部门</el-button>
        </div>
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          row-key="id"
          border
          :lazy="true"
          height="calc(100vh - 330px)"
          :load="dataLoad"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column prop="deptName" label="部门"  align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template #default="scope">
              <el-switch
                :class="{'check-switch-right': scope.row.status, 'check-switch-left': !scope.row.status,}"
                class="switch-button"
                active-text="启用" inactive-text="禁用"
                v-model="scope.row.status" @change="changeStatus(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center"  :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column prop="operator" label="操作" width="120px" align="center" fixed="right">
            <template #default="scope">
              <el-button class="table-edit-button" type="primary" size="small" icon="Edit" @click="editHandler(scope.row,scope.$index)">
                编辑
              </el-button>
              <el-button class="table-edit-button" @click="deleteHandler(scope.row,scope.$index)" type="danger" size="small" icon="Delete">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <deptDialog
        :dialogVisible.sync="dialogVisible"
        :title="title"
        :rowInfo="rowInfo"
        @closeDialog="closeDialog"
      />
    </div>
  </div>
</template>

<script>
import {deptData} from '@/mock/jsModule/system'
import deptDialog from '@/views/system/dept/components/deptDialog'
export default {
  name: 'index',
  components:{
    deptDialog,
  },
  data(){
    return{
      tableData: [],
      tableLoading: false,
      search:{
        dept: '',
      },
      dialogVisible: false,
      title: '',
      rowInfo: {},
    }
  },
  mounted () {
    this.init()
  },
  methods:{
    init(){
      this.tableLoading = true
      const data = deptData.map(item => {
        return{
          ...item,
          hasChildren: true
        }
      })
      setTimeout(() =>{
        this.tableData = data
        this.tableLoading = false
      },1000)
    },
    // 数据懒加载
    dataLoad(tree, treeNode, resolve){
      // 编写获取子级数据代码
      setTimeout(() =>{
        resolve(tree.children)
      },500)
    },
    // 关闭弹窗后
    closeDialog(){
      this.dialogVisible = false
    },
    // 切换账户状态， 值发生变化时的回调函数
    changeStatus(row){
      // 在点击开关按钮时，按钮的值已经发生变化
      this.$confirm(`确定要${!row.status? '禁用' : '启用'} ${row.deptName} 账户吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() =>{
        //确定即保持现状
      })
        .catch(() =>{
          row.status = !row.status
        })
    },
    handleAdd(){
      this.title = '新增部门信息'
      this.rowInfo = {}
      this.dialogVisible = true
    },
    // 编辑部门信息
    editHandler(row,index){
      this.title = '编辑部门信息'
      this.rowInfo = row
      this.dialogVisible = true
    },
    // 删除部门信息
    deleteHandler(row,index){
      this.$confirm(`确定要删除该部门信息吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() =>{
        this.tableData.splice(index,1)
        this.$message.success('删除成功')
      })
    },
    // 查询
    handleSearch(){
      this.tableLoading = true
      setTimeout(() =>{
        this.tableLoading = false
      },1000)
    },
    // 重置
    handleReset(){
      this.tableLoading = true
      setTimeout(() =>{
        this.tableLoading = false
      },1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.dept-manage-content{
  border: 1px solid #c3cfd7;
  height: 100%;
}
.search-container{
  border-bottom: 1px solid #c3cfd7;
  height: 80px;
  text-align: left;
  line-height: 80px;
}
.dept-table-container{
  padding: 10px;
}
.add-button-container{
  height: 50px;
  line-height: 50px;
  text-align: right;
}
</style>
<style lang="scss">
.search-label-config{
  margin-left: 10px;
  .label-name{
    font-weight: 600;
    color: #4787d2;
  }
  .el-input{
    height: 30px;
    .el-input__inner{
      height: 30px;
      line-height: 30px;
    }
  }
}
.search-config-button{
  margin-left: 10px;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  border: 1px solid $primaryColor;
}
.search-config-button.el-button--primary{
  background-color: $primaryColor;
}
.table-edit-button{
  padding: 5px 5px;
}
.switch-button{
  position: relative;
  .el-switch__core{
    width: 54px !important;
  }
  .el-switch__label{
    position: absolute;
    display: none;
  }
}
.switch-button.check-switch-right{
  .el-switch__label--right{
    display: inline-block !important;
    margin-left: 4px;
    color: #fff;
  }
}
.switch-button.check-switch-left{
  .el-switch__label--left{
    display: inline-block !important;
    margin-left: 20px;
    margin-right: 0;
    color: #fff;
    z-index: 2;
  }
}
</style>
